/**
 * useTransition() - 使用过渡
 *    作用：
 *      性能优化相关的hook,能够降级某次状态更新的优先级。
 *    语法：
 *      const [isPending, startTransition] = useTransition()
 *        1. isPending - 表示当前是否有状态更新处理过渡状态, 一个 布尔值
 *        2. startTransition - 一个函数，接受一个 callback 做为参数，callback 内部执行的状态更新为被降低优先级
 *            startTransition(() => {
 *               // 执行更新状态的代码 setNum()
 *            })
 *
 *
 */

import { memo, useDeferredValue, useState, useTransition } from "react";

// 定义一份写死的 todos 数据
const todos = Array(200)
  .fill("")
  .map((item, index) => `Todo #${index + 1}`);
console.log(todos);

const SearchList = memo(function SearchList({ query = "" }) {
  // 人为的卡顿3秒
  const startTime = Date.now();
  while (Date.now() - startTime < 3000) {}

  // 基于 todos 与 props 中传递过来的 query 先做一份过滤
  const list = todos.filter((item) => item.includes(query));

  return (
    <ul>
      {list.map((item, index) => (
        <li key={index}>{item}</li>
      ))}
    </ul>
  );
});

function App() {
  const [isPending, startTransition] = useTransition();

  const [num, setNum] = useState(1);
  const [query, setQuery] = useState("");
  const [queryTwo, setQueryTwo] = useState("");

  function handleChange(event) {
    setQuery(event.target.value);

    startTransition(() => {
      setQueryTwo(event.target.value);
    });
  }

  return (
    <div>
      <h1>App</h1>
      <input
        type="text"
        placeholder="请输入搜索关键字"
        value={query}
        onChange={handleChange}
      />
      <button onClick={() => setNum((num) => num + 1)}>{num}</button>
      <hr />
      <div style={{ opacity: isPending ? 0.4 : 1 }}>
        <SearchList query={queryTwo} />
      </div>
    </div>
  );
}

export default App;
